<template>
  <div>
    <el-card>
      <div>
        姓名:<el-input v-model="inp" placeholder="请输入内容" @input="search" />
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          label="姓名"
          prop="name"
        />
        <el-table-column
          label="公司名称"
          prop="company"
        />
        <el-table-column
          label="公司地址"
          prop="city"
        />
        <el-table-column
          label="面试方式"
          prop="way"
        />
        <el-table-column
          label="面试进度"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.progress==0 ">还未面试</span>
            <span v-else>面试结束</span>
          </template>
        </el-table-column>
        <el-table-column
          label="面试时间"
        >
          <template slot-scope="scope">
            {{ scope.row.time|moment("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="图片">
          <template slot-scope="scope">
            <img :src="'http://127.0.0.1:3000/images/'+scope.row.lu"  alt="">
          </template>
          </el-table-column> -->
        <el-table-column
          label="是否上传录音"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.record_src!='无' ">已上传</span>
            <span v-else>未上传</span>
          </template>
        </el-table-column>
        <el-table-column
          label="是否上传题目"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.question!='无' ">已上传</span>
            <span v-else>未上传</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button @click="lu(scope.row.id)"><a class="blue">上传录音</a></el-button>
            <el-button @click="refuse(scope.row.id)"><a class="blue">上传问题</a></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="t"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="上传录音" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="上传" prop="reason">
          <el-upload
            ref="upload"
            name="record_src"
            class="upload-demo"
            :data="form"
            action="str"
            :http-request="aaa"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="save">确 定</el-button> -->
      </div>
    </el-dialog>

    <el-dialog title="上传面试题" :visible.sync="dialogFormVisible2" @close="$refs.ruleForm.resetFields()">
      <el-form ref="ruleForm" :model="form2" :rules="rules">
        <el-form-item label="题目内容" prop="desc">
          <!-- <el-input v-model="form2.desc" type="textarea" /> -->
          <quill-editor
            ref="richAnalysis"
            v-model="form2.desc"
            :options="editorOption"
            style="color:#333"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'], // 引用，代码块
  [{ 'header': 1 }, { 'header': 2 }], // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }], // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
  [{ 'direction': 'rtl' }], // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ 'color': [] }, { 'background': [] }], // 颜色选择
  [{ 'font': [] }], // 字体
  [{ 'align': [] }], // 居中
  ['clean'], // 清除样式,
  ['link', 'image'] // 上传图片、上传视频
]
export default {
  components: {},
  props: {},
  data() {
    return {
      // 富文本编辑器配置
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', // 主题 snow：有工具栏的；bubble：只有文本域的
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
          imageDrop: true, // 图片拖拽
          imageResize: { // 放大缩小
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
            }

            
          }
        }
      },
      inp: '',
      tableData: [],
      size: 5,
      page: 1,
      t: 0,
      pageisornot: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        id: ''
      },
      form2: {
        id: '',
        desc: ''
      },
      url: '',
      rules: {
        reason: [
          { required: true, message: '请输入驳回理由', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入面试题', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getmian()
  },
  mounted() {},
  methods: {
    async getmian() {
      this.pageisornot = false
      var res = await this.http.get('/replay/replay', {
        params: {
          status: 1,
          page: this.page,
          size: this.size
        }
      })
      console.log(this.page)
      console.log(res)
      if (res.status == 200) {
        this.tableData = res.data.data
        this.tableData.forEach((element) => {
          var a = element.record_src.split('/')
          if (a[4] == '%E6%97%A0') {
            element.record_src = '无'
          }
        })
        console.log(this.tableData)
        this.t = res.data.count
      }
    },
    async search() {
      if (!this.pageisornot) {
        this.page = 1
      }
      if (this.inp != '') {
        var res = await this.http.get('/replay/replay', {
          params: {
            name: this.inp
          }
        })
        if (res.status == 200) {
          this.tableData = res.data.data
          this.t = res.data.count
        }
      } else {
        this.getmian()
      }
      this.pageisornot = true
    },
    handleSizeChange(v) {
      this.size = v
      if (this.pageisornot) {
        this.search()
      } else {
        this.getmian()
      }
    },
    handleCurrentChange(v) {
      this.page = v
      if (this.pageisornot) {
        this.search()
      } else {
        this.getmian()
      }
    },
    lu(id) {
      this.form.id = id
      this.url = `http://127.0.0.1:8000/replay/replay/${id}`
      // console.log(this.url)
      this.dialogFormVisible = true
    },
    submitUpload() {
      this.$refs.upload.submit()
      this.dialogFormVisible = false
      this.getmian()
      this.$message.success('上传成功')
    },
    refuse(id) {
      this.dialogFormVisible2 = true
      this.form2.id = id
    },
    async save() {
      console.log(this.form2.desc)
      this.$refs.ruleForm.validate(async(m) => {
        if (!m) return
        var res = await this.http.patch(`/replay/replay/${this.form2.id}`, {
          question: this.form2.desc
        })
        console.log(res)
        if (res.status == 200) {
          this.getmian()
          this.$message.success('上传题目成功')
          this.dialogFormVisible2 = false
        }
      })
    },
    async aaa(content) {
      // console.log(11111111111111)
      console.log(content)
      console.log(content.file)
      const fileData = content.file	// 拿到file后，转为FormData格式，这样再发送给后端就可以了
      const formData = new FormData()
      // formData.append("token", that.token);
      formData.append('record_src', fileData)
      this.http.patch('/replay/replay/1', formData)	// 发起请求(此处的axios做了封装)
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
      console.log(data)
    }
  }
}
</script>
<style scoped>
    .el-input{
        width: 200px;
        margin-left: 7px;
    }
    .el-pagination{
      margin-top: 20px;
      text-align: center;
    }
    .el-table .el-button{
      background: 0;
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
      border:0;
    }
    .blue{
        color: blue;
    }
    .el-table img{
        width: 50px;
        height: 50px;
    }
    .quill-editor{
      height: 280px;
      margin: 40px 0;
    }
</style>
